<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<s:include value="/comm/header.jsp" />
<s:include value="/comm/menu.jsp" />
    <!--第1部分开始  --> 
    <div class="wrap1">
    	<div class="blank1"></div>
        
    	<div class="outbox_invite">


<div class="tab7_tt">代购邀约</div>

<div class="conten7">
 <!--表单内容开始-->
	
	<div style="padding:10px 0">
		<s:form id="selectCanBuy" name="selectCanBuy" action="confirmInvite" method="post">
		<input type="hidden" id="userId" name="canBuyModel.user.userid" value="<s:property value='#session.user.userid' />" />
		<input type="hidden" name="wantBuyModel.wantId" value="<s:property value='wantBuyModel.wantId' />" />
		&raquo;&nbsp;&nbsp;选择已发布的代购信息&nbsp;&nbsp;&nbsp;
		<select id="category" onchange="selectCategory()">
			<s:iterator value="categorys">
				<s:if test="wantBuyModel.categoryId == categoryId">
					<option value="<s:property value='categoryId' />" selected><s:property value="categoryName" /></option>
				</s:if>
				<s:else>
					<option value="<s:property value='categoryId' />"><s:property value="categoryName" /></option>
				</s:else>
			</s:iterator>
		</select>
	    &nbsp;&nbsp;
	    <select id="canBuys" name="canBuyModel.canId" onchange="changeCanBuy()">
	    	<option value="0">请选择代购信息</option>
	    	<s:iterator value="canBuyModels">
	    		<option value="<s:property value='canId' />"><s:property value="goodsName" /></option>
	    	</s:iterator>
	    </select>
	    <label id="canBuyPrompt" style="display: none; color: red">请选择一条代购信息</label>
	    </s:form>
	</div>
    <div>&raquo;&nbsp;&nbsp;还没有所需的代购信息？</div>
    
<!--  弹出管理开始 -->



		<div class="pbox_address_click">
            <div class="link2"><a onclick="javascript:showDiv()">+ 填写代购信息</a></div>
        </div>
		<div class="pbox_address_2 pbox_ie6" id="pbox_address">

	 <div class="wrap_right">
            <span class="showpic_close"><a href="javascript:closeDiv()"><img src="images/close.png" border="0"/></a></span>
    	 </div>

            <div class="link2">+ 填写代购信息</div>

<!--选项卡开始--> 	
<s:form id="addCanBuy" name="addCanBuy" action="confirmInvite" method="post" enctype="multipart/form-data">
<input type="hidden" name="canBuyModel.user.userid" value="<s:property value='#session.user.userid' />" />
<input type="hidden" name="wantBuyModel.wantId" value="<s:property value='wantBuyModel.wantId' />" />
<div id="mainTabbox7">
 	<div id="tabbox7" class="tabbox7_box">
    	
		<ul>
        	
			<li id="taba1" onclick="setTab('taba',1,3)" class="hover"><a>基本信息</a></li>
			<li id="taba2" onclick="setTab('taba',2,3)"><a>物品详情</a></li>
			<li id="taba3" onclick="setTab('taba',3,3)"><a>运输与服务</a></li>
 		</ul>
 
	</div>
 	<div id="conten">
      <div class="tab_wrap7">
      	<div>其中加*的为必填项,其他为选填项</div>
 		<div class="tab7_show" id="con_taba_1">
        	<div class="input_box_wrap_invite">
        <!--选项卡1内容开始-->

<div class="wrap_left"  style="width:250px;_width:350px;">
<!-- -->
<div class="input_box">
	<ul>
    	<li class="t1"><span class="span33">名称</span></li>
        <li class="t2">
        	<input type="text" class="input1" name="canBuyModel.goodsName" id="goodsName" value="<s:property value='wantBuyModel.goodsName' />"  maxlength="35"/>
        	<label style="color:red">&nbsp;*</label><br/></li>

<div class="prompt_ie6">
												<label id="goodsNamePrompt"
												style="display:none; color: red;margin-left:70px;line-height:15px;">物品名称不能为空</label><br/></div>       
        
        <li class="t1"><span class="span33">类别</span></li>
        <li class="t2">
        	<s:select name="canBuyModel.categoryId" list="categorys" listKey="categoryId" listValue="categoryName" value="wantBuyModel.categoryId"/>
        </li>
        
        
        <li class="t1"><span class="span33">所属区域</span></li>
        <li class="t2">
        	<s:select name="canBuyModel.areaId" list="areas" listKey="areaId" listValue="areaName"  value="wantBuyModel.areaId"/>
        </li>

        
        <li class="t1"><span class="span33">价格</span></li>
        <li class="t2">
        	<input type="text" class="input1" name="canBuyModel.price" id="price" value="<s:property value='wantBuyModel.price' />" />
        	
        	<label style="color:red">&nbsp;*</label><br/></li>
<div class="prompt_ie6">
												<label id="pricePrompt" style="display:none;margin-left:70px;line-height:15px;color: red">请输入正确的价格</label><br/></div>
			
        
        <li class="t1"><span class="span33">佣金比例</span></li>
        <li class="t2">
			<input type="text" name="canBuyModel.ratio" class="input1" id="ratio" value="<s:property value='wantBuyModel.ratio' />" />
			
			<label style="color:red">&nbsp;*</label><br/></li>
<div class="prompt_ie6"> <label id="ratioPrompt" style="display:none; color: red;margin-left:70px;line-height:15px;"></label><br/></div>
			

        <li class="t1"><span class="span33">佣金</span></li>
        <li class="t2">
        	<input type="text" name="canBuyModel.serviceFee" id="serviceFee" class="input1" value="<s:property value='wantBuyModel.serviceFee' />" readonly="readonly" />
        </li>
        <li class="t1"><span class="span33">国内价</span></li>
        <li class="t2">
        	<input type="hidden" name="canBuyModel.domesticPrice" id="domesticPriceId" value="0" />
			<input id="domesticPrice" name="domesticPrice" type="text" class="input1"/>
			<br/>
			<label id="domesticPricePrompt" style="color: red"></label>
        </li>
        
        <li class="t1"><span class="span33">来源</span></li>
        <li class="t2">
        	<s:if test="wantBuyModel.source == 0">
        		<s:select name="canBuyModel.source" list='#{"1":"大型超市","2":"便利店","3":"专卖店","4":"生产厂家","5":"其他" }' theme="simple" />
        	</s:if>
			<s:else>
				<s:select name="canBuyModel.source" list='#{"1":"大型超市","2":"便利店","3":"专卖店","4":"生产厂家","5":"其他" }' theme="simple" value="wantBuyModel.source" />
			</s:else>
        </li>
        
        <li class="t1"><span class="span33">单据类型</span></li>
        <li class="t2">
        	<s:if test="wantBuyModel.receipts == 0">
        		<s:select name="canBuyModel.receipts" list='#{"1":"小票","2":"发票","3":"发票或小票复印件" }' theme="simple" />
        	</s:if>
			<s:else>
				<s:select name="canBuyModel.receipts" list='#{"1":"小票","2":"发票","3":"发票或小票复印件" }' theme="simple" value="wantBuyModel.receipts"/>
			</s:else>
        </li>
       
    </ul>
    
</div>
<div class="clear"></div>
<!-- -->
</div>
<div class="wrap_left" style="width:350px;_width:300px;">
<!-- -->
<div class="input_box">


  <ul>  
        <li class="t1"><span class="span33">首件运费</span></li>
		<li class="t2">
			<s:textfield id="shippingCost" name="canBuyModel.logistics.price" cssClass="input1" /><label id="shippingCostPrompt" style="color: red"></label>
		</li>
		<li class="t1"><span class="span33">续件运费</span></li>
		<li class="t2">
			<s:textfield id="continuedPrice" name="canBuyModel.logistics.continuedPrice" cssClass="input1" />
			<br/>
			<label id="continuedPricePrompt" style="color: red"></label>
		</li>
        <li class="t1"><span class="span33">描述</span></li>
        <li class="t2">
			<input name="canBuyModel.description" type="text" class="input1" value="描述\关键字等" maxlength="23"/>
        </li>

    </ul>
    <ul>       
        <li class="t1"><span class="span33">图片</span></li>
        <li class="t2">
        	<label id="imagePrompt" style="line-height:30px;color:red;display: none">请至少选择一张图片</label><br/>
        	<ul>
        		<li><s:file name="image" cssClass="input5"></s:file></li>
                <li><s:file name="image" cssClass="input5"></s:file></li>
                <li><s:file name="image" cssClass="input5"></s:file></li>
                <li><s:file name="image" cssClass="input5"></s:file></li>
                <li><s:file name="image" cssClass="input5"></s:file></li>
            </ul>
        </li>
  </ul>

    
</div>
<div class="clear"></div>
<!-- -->
</div>

<div class="clear"></div>

        
        <!--选项卡1内容结束-->
        	</div>
        
 		</div>
 		<div class="tab7_show" id="con_taba_2">
 			<s:textarea name="canBuyModel.details" cols="160" rows="10" cssClass="xheditor"></s:textarea>
 		</div>
 		<div class="tab7_show" id="con_taba_3">
 			<s:textarea name="canBuyModel.serviceAssurance" cols="160" rows="10"  cssClass="xheditor"></s:textarea>
    	</div>
        
      </div>
 	</div>
 </div>
<!--选项卡结束-->    

        
			<div class="clear"></div>
            <div style=" padding:10px 0; text-align:center; font-size:12px;"><input name="canBuyModel.isOpen" type="radio" value="0"  checked />&nbsp;同时发布一条代购信息&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name="canBuyModel.isOpen" type="radio" value="1" />&nbsp;只发起邀约,不发布公开的代购信息</div>
    		<div class="but_submit" style="margin:20px 0"><a href="javascript:save();">保存</a>&nbsp;&nbsp;&nbsp;<a href="javascript:closeDiv()">返回</a></div>
    		</s:form> 
		</div>
        <div id="fixbg" class="fixbg" style="display:none;"></div>
        
        
 <!--弹出管理结束 -->    
    

</div>

<div class="but_box1">
	<span class="but_submit"><a href="javascript:confirmInvite()">发起代购邀约</a></span>
</div>
<div class="clear"></div>

        <!--表单内容结束-->
</div>
    

   	  </div>

    </div>
<!--第1部分结束  --> 
<s:include value="/comm/bottom.jsp" />

<script type="text/javascript">
function getPageSize(){
var xScroll,yScroll;
if (window.innerHeight && window.scrollMaxY){
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){
sScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else {
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth,windowHeight;
//var pageHeight,pageWidth;
if (self.innerHeight) {
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) {
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) {
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
var pageWidth,pageHeight
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
if(xScroll < windowWidth) {
pageWidth = windowWidth;
} else {
pageWidth = xScroll;
}
arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
return arrayPageSize;
}
//关闭弹出层
function closeLayer(){
document.getElementById("popupAddr").style.display = "none";
document.getElementById("bodybg").style.display = "none";
return false;
}
//获取滚动条的高度
function getPageScroll(){
var yScroll;
if (self.pageYOffset) {
yScroll = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop){
yScroll = document.documentElement.scrollTop;
} else if (document.body) {
yScroll = document.body.scrollTop;
}
arrayPageScroll = new Array('',yScroll)
return arrayPageScroll;
}

function showDiv(){
$("#canBuyPrompt").hide();
var arrayPageSize   = getPageSize();//调用getPageSize()函数
var arrayPageScroll = getPageScroll();//调用getPageScroll()函数
document.getElementById('pbox_address').style.display='block';
document.getElementById('pbox_address').style.top = arrayPageScroll[1] + (arrayPageSize[3] - 35 - 400) / 2 + 'px';
document.getElementById('pbox_address').style.left = (arrayPageSize[0] - 20 - 750) / 2 + 'px';

document.getElementById('fixbg').style.display='block';
}

function closeDiv(){
$("#pbox_address").hide();
$("#fixbg").hide();
$("#overlay").hide();
}

function selectCategory() {
	$("#canBuyPrompt").hide();
	var categoryId =$("#category").val();
	var areaId = "<s:property value='wantBuyModel.areaId' />";
	$.ajax({
		url:'queryCanBuysByUser.htm',
		type:'post',
		data:{"canBuyModel.categoryId":categoryId},
		success:showCanBuys
	});	
}

function changeCanBuy() {
	$("#canBuyPrompt").hide();
}

function showCanBuys(data) {
	var canBuyModels = data.canBuyModels;
	var options = "<option value='0'>请选择代购信息</option>";
	for (var i = 0; i < canBuyModels.length; i++) {
		options += "<option value='" + canBuyModels[i].canId + "'>" + canBuyModels[i].goodsName + "</option>";
	}
	$("#canBuys").html(options);
} 

function confirmInvite() {
	var canId = trim($("#canBuys").val());
	if (canId == 0) {
		$("#canBuyPrompt").show();
		return;
	}
	$("#selectCanBuy").submit();
}

function save() {
	if (!validateGoodsName()) {
		return;
	}
	if (!validatePrice()) {
		return;
	}
	if (!validateRatio()) {
		return;
	}
	if (!validateDomesticPrice()) {
		return;
	}
	if (!validateShippingCost()) {
		return;
	}
	
	if (!validateImage()) {
		return;
	}
	
	if (trim($("#shippingCost").val()) == "") {
		$("#shippingCost").val(0);
	}
	
	var domesticPrice = $("#domesticPrice").val();
	if (domesticPrice != "" && domesticPrice != "国内无此产品") {
		$("#domesticPriceId").val($("#domesticPrice").val());
	}
	$("#addCanBuy").submit();	
}


$(document).ready(function(){
	calcServiceFee();
	$("#goodsName").blur(validateGoodsName);
	$("#price").blur(function(){if (validatePrice()) {calcServiceFee();}});
	$("#ratio").blur(function() {if (validateRatio()) {calcServiceFee();}});
	$("#domesticPrice").blur(validateDomesticPrice);
	$("#shippingCost").blur(function(){validateShippingCost($(this).val(),"shippingCostPrompt");});
	$("#continuedPrice").blur(function(){validateShippingCost($(this).val(),  "continuedPricePrompt");});
	$("[name=image]").each(function() {
		$(this).change(function() {
			$("#imagePrompt").hide();
		});
	});
});

function validateGoodsName() {
	var goodsName = trim($("#goodsName").val());
	if (goodsName == "") {
		$("#goodsNamePrompt").html("物品名称不能为空");
		$("#goodsNamePrompt").show();
		return false;
	}
	else {
		$("#goodsNamePrompt").hide();
		return true;
	}
}
	
function validatePrice() {
	var price = trim($("#price").val());
	if (price == "") {
		$("#pricePrompt").html("价格不能为空");
		$("#pricePrompt").show();
		return false;;
	}
	else if (!priceRegex.test(price) || price <= 0) {
		$("#pricePrompt").html("请输入正确的价格");
		$("#pricePrompt").show();
		return false;
	} 
	else {
		$("#pricePrompt").hide();
		return true;
	}
}
	
function validateRatio() {
	var ratio = trim($("#ratio").val());
	if (ratio == "") {
		$("#ratioPrompt").html("佣金比例不能为空");
		$("#ratioPrompt").show();
		return false;
	}
	if (!digitRegex.test(ratio) || ratio <= 0) {
		$("#ratioPrompt").html("只能输入正整数");
		$("#ratioPrompt").show();
		return false;
	}
	$("#ratioPrompt").hide();
	return true;
}

function validateImage() {
	var images = $("[name=image]");
	var empty = true;
	for (var i = 0; i < images.length; i++) {
		if (images[i].value != "") {
			empty = false;
			break;
		}
	}
	if (empty) {
		$("#imagePrompt").show();
		return false;
	}
	return true;
}

//计算佣金
function calcServiceFee() {
	var price = $("#price").val();
	var ratio = $("#ratio").val();
	if (price != "" && priceRegex.test(price) && price > 0 && ratio != "" && digitRegex.test(ratio) && ratio > 0) {
		var serviceFee = price * ratio / 100;
		$("#serviceFee").val(serviceFee.toFixed(2));	
	}
}

function validateDomesticPrice() {
	var price = trim($("#domesticPrice").val());
	if (price == "" || price == "国内无此产品") {
		return true;
	}
	if (!priceRegex.test(price) || price <= 0) {
		$("#domesticPricePrompt").html("请输入正确的价格");
		$("#domesticPricePrompt").show();
		return false;
	}
	$("#domesticPricePrompt").hide();
	return true;
	
}


function validateShippingCost(price, pricePromptId) {
	if (arguments.length == 0) {
		return (validateShippingCost($("#shippingCost").val(), "shippingCostPrompt") && validateShippingCost($("#continuedPrice").val(), "continuedPricePrompt")); 
	}
	else {
		if (price != "" && (!priceRegex.test(price) || price < 0)) {
			$("#" + pricePromptId).html("请输入正确的运费");
			return false;
		}
		$("#" + pricePromptId).html("");
		return true;
	}	
}

</script>